<template>
  <view>
    <!-- pages/login/login.wxml -->
    <view>
      <view class="login_ding">
        <view>
          <view class="login_ding_2">
            <view>1</view>
          </view>
          <view class="login_ding_2_">授权登录</view>
        </view>

        <view>
          <view class="login_ding_1">2</view>
          <view>绑定手机</view>
        </view>
      </view>

      <view class="">
        <view class="login_zhong">
          <view>为了您的账号安全及通知短信的送达，</view>
        </view>
        <view class="login_zhong">
          <view>申请获取您的手机号</view>
        </view>
      </view>

      <view class="login_di">
        <view class="login_di_">
          <view class="login_dian"></view>
          <view>在线预订</view>
        </view>

        <view class="login_di_">
          <view class="login_dian"></view>
          <view>预订信息查询</view>
        </view>
      </view>
      <!--调试完成后放开-->
<!--            <button @getphonenumber="getPhoneNumber" open-type="getPhoneNumber" class="login_butter">-->
<!--              <view>绑定手机</view>-->
<!--            </button>-->
      <button @click="testgetPhoneNumber" class="login_butter">
              <view>绑定手机</view>
            </button>
    </view>

  </view>
</template>

<script>
// pages/login/login2.js
import {mobileLogin, userindex, wxappgetphone} from "@/common/api";

var app = getApp();
export default {
  data() {
    return {
      showModal: false,
      showModal2: false,
      wxapp_open_id: null,
      code: null
    };
  }
  /**
   * 生命周期函数--监听页面加载
   */,
  onLoad(options) {
    this.code = options.code;
    this.wxapp_open_id = options.wxapp_open_id
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  },
  methods: {
    testgetPhoneNumber() {
      mobileLogin({mobile: "17659737395", wxapp_open_id: this.wxapp_open_id}, (loginres => {
		  console.log(loginres)
        if (loginres.data.code == 0) {
          app.globalData.loginstatus = 2;
          app.globalData.user_id = loginres.data.data.id;
          app.globalData.access_token = loginres.data.data.access_token
          uni.showToast({
            title: '绑定成功',
            duration: 2000,
            mask: true, //是否有透明蒙层，默认为false
            success: (userinfo) => {
                uni.navigateBack({delta: 2})
            }
          })
        }
      }))
    },
    getPhoneNumber(e) {
      uni.login({
        success: (res) => {
          wxappgetphone({
            code: res.code,
            encryptedData: e.detail.encryptedData,
            iv: e.detail.iv
          }, res => {
            console.log('wxappgetphone', res, res.data.data)
            mobileLogin({mobile: res.data.data.phoneNumber, wxapp_open_id: this.wxapp_open_id}, (loginres => {
              console.log('loginres', loginres)
              app.globalData.loginstatus = 2;
              app.globalData.userinfo = loginres.data.data;
              app.globalData.user_id = loginres.data.data.id;
              app.globalData.access_token = loginres.data.data.access_token
              uni.showToast({
                title: '登录成功',
                duration: 2000,
                mask: true, //是否有透明蒙层，默认为false
                success: () => {
                  userindex(userindexr => {
                    app.globalData.userinfo = userindexr.data.data.info
                    console.log("userindex", userindexr)
                    uni.navigateBack({delta: 2})
                  })

                }
              })
            }))
          })
        }
      })
    },
    showModalFun: function () {
      // this.setData({
      //   showModal: true
      // });
    },

    hideModal: function () {
      this.setData({
        showModal: false
      });
    },

    hideModal2: function () {
      this.setData({
        showModal: false,
        showModal2: true
      });
    },

    hideModal3: function () {
      this.setData({
        showModal: true,
        showModal2: false
      });
    }
  }
};
</script>
<style>
.login_ding {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 40rpx;
  margin-bottom: 100rpx;
}

.login_ding_1 {
  width: 40rpx;
  height: 40rpx;
  margin-left: 45rpx;
  padding: 5rpx;
  background-color: blanchedalmond;
  border-radius: 50%;
  display: flex;
  justify-content: space-around;
  margin-bottom: 30rpx;
}

.login_ding_2 {
  width: 40rpx;
  height: 40rpx;
  margin-left: 45rpx;
  padding: 5rpx;
  background-color: rgba(119, 106, 106, 0.253);
  border-radius: 50%;
  display: flex;
  justify-content: space-around;
  margin-bottom: 30rpx;
  color: rgb(255, 255, 255);
}

.login_ding_2_ {
  color: rgba(180, 179, 179, 0.849);
}

.login_zhong {
  display: flex;
  justify-content: center;
  font-weight: bold;
  font-size: 30rpx;
}

.login_di {
  display: flex;
  margin-top: 80rpx;
  justify-content: center;
  font-size: 24rpx;
}

.login_dian {
  width: 8rpx;
  height: 8rpx;
  background-color: rgb(196, 146, 71);
  border-radius: 50%;
  margin-right: 10rpx;
}

.login_di_ {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 40rpx;
  color: rgb(99, 96, 96);
}

.login_butter {
  display: flex;
  background-color: blanchedalmond;
  justify-content: center;
  align-items: center;
  margin: 60rpx 40rpx 0 40rpx;
  height: 100rpx;
  border-radius: 8rpx;
  color: rgb(134, 94, 33);
  font-weight: 900;
  font-family: '黑体', 'SimSun', sans-serif;
}

.login_butter::after {
  border: none;
}

.modal-mask {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  z-index: 9999;
}

.modal-container {
  width: 100%;
  background-color: rgb(235, 235, 235);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
  padding: 40rpx;
}

.tc_tp {
  width: 40rpx;
  height: 40rpx;
  background-color: blue;
  border-radius: 50%;
  margin-right: 20rpx;
}

.tc_ding {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.tc_dd {
  display: flex;
}

.tc_jg {
  width: 40rpx;
  height: 40rpx;
}

.tc_h1 {
  font-size: 30rpx;
  font-weight: 900;
}

.tc_h2 {
  margin: 10rpx 0 40rpx 0;
  font-size: 25rpx;
  color: rgb(61, 60, 60);
}

.tc_h3 {
  margin-left: 25rpx;
  font-size: 25rpx;
  color: rgb(61, 60, 60);
}

.tc_kk {
  background-color: rgb(255, 255, 255);
  height: 120rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8rpx;
  margin-bottom: 20rpx;
}

.tc_kk2 {
  display: flex;
  justify-content: center;
  margin-top: 100rpx;
  margin-bottom: 100rpx;
  font-weight: 900;
  font-size: 27rpx;
  color: rgb(22, 24, 121);
}

.tc_xiaoyuhao {
  width: 40rpx;
  height: 40rpx;
}

.tc2_ding {
  display: flex;
}

.tc2_h1 {
  font-weight: 900;
  margin-left: 100rpx;
}

.ct2_text {
  font-size: 30rpx;
  height: 587rpx;
  margin-top: 60rpx;
  color: rgb(68, 67, 67);
}

a {
  color: rgb(21, 94, 153);
}
</style>
